<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>submenu</title>
    <link rel = "short icon" href=".\img\mixue.jpg"/>
    <style>
        /* 清除默认样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        }

        /* 一级菜单样式 */
        ul {
            list-style: none; /* 去除列表样式 */
            background-color:white;
            font-size: 18px;
            text-align: center;
        }
        li {
            position: relative; /* 为二级菜单定位 */
            display: inline-block; /* 让菜单横向排列 */
        }

        a {
            text-decoration: wavy;
            color: black;
            padding: 10px 20px;
            display: block; /* 扩大点击区域 */
        }

        a:hover {
            background-color: #d8d8d8; /* 鼠标悬停时变色 */
            color: black;
        }
        /* 二级菜单样式 */
        .submenu {
            display: none; /* 默认隐藏二级菜单 */
            position: absolute;
            top: 100%; /* 二级菜单定位到下方 */
            background-color: white;
            min-width: 120px;
        }
        .submenu li {
            display: block; /* 竖向排列 */
            
        }
        .submenu a {
            padding: 8px 20px;
        }
        li:hover .submenu {
            display: block; /* 鼠标悬停时显示二级菜单 */
        }
    </style>
</head>
<body>
    <!-- 一级菜单 -->
    <ul>
        <li>
            <a href="#">咖啡</a>
            <!-- 二级菜单 -->
            <ul class="submenu">
                <li><a href="#">生椰拿铁</a></li>
                <li><a href="#">丝绒拿铁</a></li>
                <li><a href="#">橙C美式</a></li>
            </ul>
        </li>
        <li>
            <a href="#">果茶</a>
            <!-- 二级菜单 -->
            <ul class="submenu">
                <li><a href="#">四季春</a></li>
                <li><a href="#">百香果</a></li>
                <li><a href="#">杨枝甘露</a></li>
            </ul>
        </li>
        <li>
            <a href="#">奶茶</a>
            <!-- 二级菜单 -->
            <ul class="submenu">
                <li><a href="#">厚芋泥</a></li>
                <li><a href="#">草莓啵啵</a></li>
                <li><a href="#">芋圆葡萄</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>